<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <script src="../static/js/axios.js"></script>
    <link rel="shortcut icon" href="../static/imgs/cms.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/PersonalCenter.css">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示！！!</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
        <!--导航栏--->
        <nav class="navbar navbar-default nav_bottom">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#" style="font-weight: 900;font-size: 40px"><span style="color: #fc5531;">c</span>sdn</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="#"><span>首页</span></a></li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control search-input" placeholder="请输入关键字......">
                        </div>
                        <button class="btn btn-default btn-search search-blog"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="user-head-icon">
                            <img src="" class="user-head" alt="">
                            <div class="drop-box" style="display: none;">
                                <div class="drop-nickname-box">
                                    <div class="drop-nickname">
                                    </div>
                                    <div style="width: 100%;height: 2px">
                                        <hr style="width: 100%;">
                                    </div>
                                </div>
                                <div class="drop-info-box">
                                    <div class="drop-info-fans">
                                        <div class="drop-info-one fans-info">0</div>
                                        <div class="drop-info-msg">粉丝</div>
                                    </div>
                                    <div class="drop-info-concern">
                                        <div class="drop-info-one following-info">0</div>
                                        <div class="drop-info-msg">关注</div>
                                    </div>
                                    <div class="drop-info-thumbs">
                                        <div class="drop-info-one support-info">0</div>
                                        <div class="drop-info-msg">获赞</div>
                                    </div>
                                </div>
                                <div class="drop-nav-box">
                                    <div style="width: 100%;height: 1px;margin-bottom: 20px">
                                        <hr style="width: 100%">
                                    </div>
                                    <div class="drop-info-option personal-center-option">
                                        <span class="glyphicon glyphicon-user drop-info-icon" aria-hidden="true"></span>
                                        个人中心
                                    </div>
                                    <div class="drop-info-option column-manage-option">
                                        <span class="glyphicon glyphicon-education drop-info-icon" aria-hidden="true"></span>
                                        专栏管理
                                    </div>
                                    <div class="drop-info-option content-manage-option">
                                        <span class="glyphicon glyphicon-file drop-info-icon" aria-hidden="true"></span>
                                        内容管理
                                    </div>
                                </div>
                                <div class="drop-exit-box">
                                    <div class="drop-info-option drop-exit-option">
                                        <span class="glyphicon glyphicon-log-in drop-info-icon" aria-hidden="true"></span>
                                        退出
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="user-login-register" style="display: none;"><a href="#">登录/注册</a> </li>
                        <li class="user-personal-center"><a href="#">个人中心</a></li>
                        <li class="content-manage"><a href="#">内容管理</a></li>
                        <li class="creat-center"><a href="#">创作中心</a></li>
                        <li>
                            <button class="btn btn-write-blog">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                发布博客
                            </button>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
       <!--竖导航栏、个人信息栏、编辑信息栏-->
        <div class="container">
            <div class="row">
                <div class="col-md-2" >
                    <div class="row">
                        <div class="col-md-11" style="background-color: white;height: 315px;position: fixed;width:180px">
                          <ul class="nav nav-pills nav-stacked" style="width: 150px;padding-top: 10px;padding-left: 2px">
                              <li class="active nav-personal-info"><a href="#" >个人资料</a></li>
                              <li class="nav-change-pwd"><a href="#">账号设置</a></li>
                              <li class="nav-head"><a href="#">我的头像</a></li>
                              <li class="nav-concern"><a href="#">我的关注</a></li>
                              <li class="nav-fans"><a href="#">我的粉丝</a></li>
                              <li class="nav-collection"><a href="#">我的收藏</a></li>
                              <li class="nav-logout"><a href="#">账号注销</a></li>
                          </ul>
                        </div>
                    </div>
                </div>
                <!--个人资料界面-->
                <div class="col-md-10 personal-info" >
                    <div class="row" style="background-color: white">
                        <div class=" col-md-6 personal-message-top" style="height: 150px">
                            <div class="headpicture-box">
                                <img src=""  alt="" class="headpicture">
                            </div>
                            <div class="top-info-box">
                              <div class="top-nickname">

                               </div>
                               <div class="top-info">
                                 <div class="top-fans-number top-number">
                                     <span class="top-info-tail top-fans">-</span>粉丝
                                 </div>
                                   <div class="top-following-number top-number">
                                       <span class="top-info-tail top-following">-</span>关注
                                   </div>
                                <div class="top-praise-number top-number">
                                    <span class="top-info-tail top-support">-</span>获赞
                                </div>
                              </div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row" style="background-color: white">
                       <div class="col-md-12 personal-message-bottom" style="height:570px;">
                          <div style="border-bottom: 1px solid rgb(221, 221, 221)">
                              <h4 style="font-weight: bold">基本信息</h4>
                          </div>
                          <div class="base-msg">
                              <!--展示个人基本信息-->
                              <div class="base-msg-out" style="" >
                              <div class="base-msg-one">
                                  <div class="base-msg-left">
                                      <span>昵</span>
                                      <span>称</span>
                                  </div>
                                  <div class="base-msg-right" id="msg-nickname"></div>
                              </div>
                              <div class="base-msg-one">
                                  <div class="base-msg-left">
                                      <span>用</span>
                                      <span>户</span>
                                      <span>ID</span>
                                  </div>
                                  <div class="base-msg-right" id="msg-username"></div>
                              </div>
                              <div class="base-msg-one">
                                  <div class="base-msg-left">
                                      <span>邮</span>
                                      <span>箱</span>
                                  </div>
                                  <div class="base-msg-right" id="msg-mailbox"></div>
                              </div>
                              <div class="base-msg-one">
                                  <div class="base-msg-left">
                                      <span>性</span>
                                      <span>别</span>
                                  </div>
                                  <div class="base-msg-right" id="msg-gender"></div>
                              </div>
                              <div class="base-msg-one">
                                  <div class="base-msg-left">
                                      <span>出</span>
                                      <span>生</span>
                                      <span>日</span>
                                      <span>期</span>
                                  </div>
                                  <div class="base-msg-right" id="msg-borndate"></div>
                              </div>
                              <div class="base-msg-one">
                                  <div class="base-msg-left">
                                      <span>所</span>
                                      <span>在</span>
                                      <span>地</span>
                                      <span>区</span>
                                  </div>
                                  <div class="base-msg-right" id="msg-region"></div>
                              </div>
                              <div class="base-msg-one">
                                      <div class="base-msg-left">
                                          <span>个</span>
                                          <span>人</span>
                                          <span>简</span>
                                          <span>介</span>
                                      </div>
                                      <div class="base-msg-right" id="msg-intro">
                                      </div>
                                  </div>
                                  <div class="editor"><span class="glyphicon glyphicon-edit btn-default" aria-hidden="true"></span><a href="#" class="editor-font">编辑</a></div>
                              </div>
                              <!--修改个人基本信息-->
                              <div class="col-md-12 editor-info">
                                  <div class="editor-msg-one">
                                    <div class="editor-msg-left">
                                        <span>昵</span>
                                        <span>称</span>
                                    </div>
                                     <div class="editor-msg-right">
                                         <input class="form-control" id="editor-info-nickname" placeholder="请输入你的昵称">
                                     </div>
                                 </div>
                                  <div class="editor-msg-one">
                                      <div class="editor-msg-left">
                                          <span>用</span>
                                          <span>户</span>
                                          <span>ID</span>
                                      </div>
                                      <div class="editor-msg-right">
                                          <input class="form-control" type="text" id="editor-info-id" placeholder="用户ID不可更改" disabled>
                                      </div>
                                  </div>
                                  <div class="editor-msg-one">
                                      <div class="editor-msg-left">
                                          <span>邮</span>
                                          <span>箱</span>
                                      </div>
                                      <div class="editor-msg-right">
                                          <input class="form-control"  type="text" id="editor-info-mailbox" placeholder="邮箱不可更改" disabled>
                                      </div>
                                  </div>
                                  <div class="editor-msg-one">
                                      <div class="editor-msg-left">
                                          <span>性</span>
                                          <span>别</span>
                                      </div>
                                      <div class="editor-msg-right">
                                          <label class="radio-inline" style="font-weight: bold">
                                              <input type="radio"  name="editor-gender" value="male" class="editor-info-gender-male">男
                                          </label>
                                          <label class="radio-inline" style="font-weight: bold">
                                              <input type="radio" name="editor-gender" value="female">女
                                          </label>
                                      </div>
                                  </div>
                                  <div class="editor-msg-one">
                                      <div class="editor-msg-left">
                                          <span>所</span>
                                          <span>在</span>
                                          <span>地</span>
                                          <span>区</span>
                                      </div>
                                      <div class="editor-msg-right">
                                          <input class="form-control" id="editor-info-region" placeholder="请输入你所在的地区">
                                      </div>
                                  </div>
                                  <div class="editor-msg-one">
                                      <div class="editor-msg-left">
                                          <span>出</span>
                                          <span>生</span>
                                          <span>日</span>
                                          <span>期</span>
                                      </div>
                                      <div class="editor-msg-right">
                                          <input type="date" placeholder="出生日期" id="editor-info-birthday" class="input-style">
                                      </div>
                                  </div>
                                  <div class="editor-msg-one">
                                      <div class="editor-msg-left">
                                          <span>个</span>
                                          <span>人</span>
                                          <span>简</span>
                                          <span>介</span>
                                      </div>
                                      <div class="editor-msg-right">
                                          <div class="form-group">
                                              <textarea class="form-control" rows="3" id="editor-info-intro" placeholder="请输入你的个人简介"></textarea>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="editor-msg-one" style="justify-content: center">
                                      <button class="change-info">保存修改</button>
                                  </div>
                              </div>
                          </div>
                       </div>
                    </div>
                </div>

                <!--修改头像界面-->
                <div class="col-md-10 change-head" >
                  <div class="change-head-box">
                         <div class="my-head-box">
                             <img src=""  alt="" class="myhead">
                         </div>
                      <div class="choose-head-box">
                           <input class="choose-head" id="photofile" name="file" type="file" accept="image/*" style="display: inline;border: #373636 solid 3px">
                           <button class="btn btn-default choose-head-btn" style="display: inline">上传</button>
                      </div>
                  </div>
                </div>

                <!--修改密码界面-->
                <div class="col-md-8 change-pwd">
                    <div class="change-pwd-box">
                        <div class="change-pwd-icon">
                            <div class="change-pwd-left"></div>
                            <div class="change-pwd-right">
                               <img class="change-pwd-img" src="../static/imgs/pwd.png" alt="">
                            </div>
                        </div>
                        <div class="change-pwd-one">
                            <div class="change-pwd-left">
                                <span>原</span>
                                <span>密</span>
                                <span>码</span>
                            </div>
                            <div class="change-pwd-right">
                                <input type="password" class="form-control change-pwd-old-pwd"  placeholder="请输入原密码">
                            </div>
                        </div>
                        <div class="change-pwd-one">
                            <div class="change-pwd-left">
                                <span>新</span>
                                <span>密</span>
                                <span>码</span>
                            </div>
                            <div class="change-pwd-right">
                                <input type="password" class="form-control change-pwd-new-pwd"  placeholder="请输入新密码">
                            </div>
                        </div>
                        <div class="change-pwd-one">
                            <div class="change-pwd-left">
                                <span>确</span>
                                <span>认</span>
                                <span>密</span>
                                <span>码</span>
                            </div>
                            <div class="change-pwd-right">
                                <input type="password" class="form-control change-pwd-again-pwd"  placeholder="请确认新密码">
                            </div>
                        </div>
                        <div class="change-pwd-one">
                            <div class="change-pwd-left">
                                <span>邮</span>
                                <span>箱</span>
                            </div>
                            <div class="change-pwd-right">
                                <input class="form-control change-pwd-mail" id="mailbox" type="text"  placeholder="邮箱不可更改" disabled>
                            </div>
                            <a href="#" class="send-code" id="change-send-code">点击发送验证码</a>
                        </div>
                        <div class="change-pwd-one">
                            <div class="change-pwd-left">
                                <span>验</span>
                                <span>证</span>
                                <span>码</span>
                            </div>
                            <div class="change-pwd-right">
                                <input class="form-control verify-code"  placeholder="验证码">
                            </div>
                        </div>
                        <div class="change-pwd-one">
                               <div class="change-pwd-left"></div>
                            <div class="change-pwd-right">
                                <button class="change-pwd-btn">修改密码</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!--我的关注界面-->
                <div class="col-md-10 my-concern">
                         <!--我的关注标题-->
                        <div class="my-concern-title">
                            <div class="my-concern-title-icon">
                                <img src="../static/imgs/我的关注.png" alt="" style="height: 40px;width: 40px">
                            </div>
                            <div class="my-concern-title-msg">
                                我的关注
                            </div>
                        </div>
                         <!--分割线-->
                        <div style="height: 1px;width: 100%;margin-bottom: 5px">
                             <hr style="height: 100%">
                         </div>
                         <!--关注列表-->
                      <div class="my-concern-list">
                     </div>
                </div>

                <!--我的粉丝界面-->
                <div class="col-md-10 my-fans">
                        <!--我的粉丝标题-->
                        <div class="my-fans-title">
                            <div class="my-fans-title-icon">
                                <img src="../static/imgs/我的关注.png" alt="" style="height: 40px;width: 40px">
                            </div>
                            <div class="my-fans-title-msg">
                                我的粉丝
                            </div>
                        </div>
                        <!--分割线-->
                        <div style="height: 1px;width: 100%;margin-bottom: 5px">
                            <hr style="height: 100%">
                        </div>
                        <!--粉丝列表-->
                    <div class="my-fans-list">
                    </div>
                </div>

                <!--我的收藏界面-->
                <div class="col-md-10 my-collection">
                    <div class=" my-collection-box">
                        <div class="my-collection-title-box">
                             我的收藏
                        </div>
                        <div class="collection-list">
                            <div class="collection-item" blog_id="">
                                <div class="recent-article-left">
                                    <div class="recent-article-icon">
                                        博客
                                    </div>
                                    <div class="recent-article-info">
                                        <div class="recent-article-in-title">
                                            <a href="#">文章标题</a>
                                        </div>
                                        <div class="recent-article-content">
                                            文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                        </div>
                                    </div>
                                </div>
                                <div class="recent-article-right">
                                    <div class="recent-article-comment recent-article-attribute">
                                        <div class="recent-article-comment-info recent-article-in-info">
                                            0
                                        </div>
                                        <div class="recent-article-show">
                                            评论数
                                        </div>
                                    </div>
                                    <div class="recent-article-support recent-article-attribute">
                                        <div class="recent-article-support-info recent-article-in-info">
                                            0
                                        </div>
                                        <div class="recent-article-show">
                                            点赞数
                                        </div>
                                    </div>
                                    <div class="recent-article-collection recent-article-attribute">
                                        <div class="recent-article-collection-info recent-article-in-info">
                                            0
                                        </div>
                                        <div class="recent-article-show">
                                            收藏数
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--账号注销界面-->
                <div class="col-md-10 account-logout">
                     <div class="account-logout-box">
                           <div class="logout-info-box">
                               <span class="logout-info-title">账号注销则视为您主动放弃以下资产和权益，且同意以下规则：</span><br><br>
                               1.账号注销后，您将无法登录、使用CSDN账号，且不支持找回任何个人资料。<br>
                               2.该账号将解除与其他产品的绑定或授权关系，且不支持找回。<br>
                               3.VIP会员等付费权益，包含已经产生但未消耗完毕的权益或未来预期权益。<br>
                               4.将不再支持使用已注销账号的用户ID注册新的账号。<br>
                               5.注销CSDN账号并不代表您注销前的账号行为和相关责任得到豁免或减轻。<br>
                           </div>
                         <div class="logout-btn-box">
                             <button class="logout-btn">已知悉，确认注销账号</button>
                         </div>
                    </div>
                </div>

            </div>
        </div>
        <!--js、jquery代码-->
        <script>
            let interval;
            let is_login=0;
            let avatar;
            /*窗口初始化函数*/
            $(function(){

                //初始化设置隐藏编辑按钮
                $(".editor").css("display","none")
                $(".editor-info").css("display","none");

                //判断登录状态
                {
                    let url = 'http://localhost:8080/userServlet?action=judge_user_status'
                    axios({
                        method: 'GET',
                        url: url,
                        params:{
                           userid:window.localStorage.getItem("email"),
                        },
                    }).then(function (res) {
                        console.log(res);
                        if(res.data.code===200) {
                            /* 如果用户状态为登录，就显示个人信息*/
                            let data = res['data'];
                            is_login=1;
                            $("#msg-nickname").html(window.localStorage.getItem("nickname"));
                            $('#msg-username').html(window.localStorage.getItem("userid"));
                            $('#msg-mailbox').html(window.localStorage.getItem("email"));
                            $(".headpicture").attr("src", window.localStorage.getItem("avatar"));
                            $(".myhead").attr("src", window.localStorage.getItem("avatar"));
                            var gender_info = window.localStorage.getItem("gender");
                            if (gender_info === "male") {
                                $('#msg-gender').html("男");
                            } else {
                                $('#msg-gender').html("女");
                            }
                            $('#msg-borndate').html(window.localStorage.getItem("borndate"));
                            let region=window.localStorage.getItem("region");
                            if (region ==="undefined") {
                                $('#msg-region').html("未知星球");
                            } else {
                                $('#msg-region').html(region);
                            }
                            let intro=window.localStorage.getItem("intro");
                            if (intro === "undefined") {
                                $('#msg-intro').html("这个人很懒,啥也没说");
                            } else {
                                $('#msg-intro').html(intro);
                            }
                            $(".user-head").attr("src",window.localStorage.getItem("avatar"));
                            $(".drop-nickname").html(window.localStorage.getItem("nickname"));
                            $(".top-nickname").html(window.localStorage.getItem("nickname"));
                            get_user_success();
                        }else{
                            is_login=0;
                            modal(res.data.message);
                            $(".user-head-icon").hide();
                            $(".user-login-register").show();
                        }
                    })
                }
            })

            /*展示收藏列表*/
            function push_collection_list(data) {
                  $(".collection-list").append(`<div class="collection-item" >
                      <div class="recent-article-left">
                          <div class="recent-article-icon">
                              博客
                          </div>
                          <div class="recent-article-info">
                              <div class="recent-article-in-title" blog_id=${data['id']}>
                                  <a href="#">${data['article_title']}</a>
                              </div>
                              <div class="recent-article-content">
                                  ${data['content_text']}
                              </div>
                          </div>
                      </div>
                      <div class="recent-article-right">
                          <div class="recent-article-comment recent-article-attribute">
                              <div class="recent-article-comment-info recent-article-in-info">
                                  ${data['comment_count']}
                              </div>
                              <div class="recent-article-show">
                                  评论数
                              </div>
                          </div>
                          <div class="recent-article-support recent-article-attribute">
                              <div class="recent-article-support-info recent-article-in-info">
                                  ${data['support_count']}
                              </div>
                              <div class="recent-article-show">
                                  点赞数
                              </div>
                          </div>
                          <div class="recent-article-collection recent-article-attribute">
                              <div class="recent-article-collection-info recent-article-in-info">
                                  ${data['collection_count']}
                              </div>
                              <div class="recent-article-show">
                                  收藏数
                              </div>
                          </div>
                      </div>
                  </div>`);
            }

            /*获取收藏列表*/
            function get_collection_list() {
                let url='http://localhost:8080/articleServlet?action=get_collection_list'
                axios({
                    method: "GET",
                    url:url,
                    params: {
                        email:window.localStorage.getItem("email")
                    }
                }).then(function (res) {
                      console.log(res);
                    let data1=res['data']['data'];
                    $(".collection-list").empty();
                    for(let i=0;i<data1.length;i++){
                        push_collection_list(data1[i]);
                    }
                    /*查看博客*/
                    $(".recent-article-in-title").click(function () {
                        window.open("ViewBlog.html?blog_id="+$(this).attr("blog_id"));
                    })
                })
            }

            /*获取用户成就*/
            function get_user_success() {
                let url='http://localhost:8080/userServlet?action=get_user_success'
                axios({
                    method: "GET",
                    url:url,
                    params: {
                        email:window.localStorage.getItem("email")
                    }
                }).then(function (res) {
                    console.log(res);
                    let data=res['data'];
                    $(".fans-info").html(data['data']['fans_number']);
                    $(".following-info").html(data['data']['following_number']);
                    $(".top-fans").html(data['data']['fans_number']);
                    $(".top-following").html(data['data']['following_number']);
                    $(".support-info").html(data['data']['support_number']);
                    $(".top-support").html(data['data']['support_number']);
                })
            }

            /*粉丝列表构造器*/
            function push_fans_list(data) {
                  let btn_class=[["concern-item-btn-content2","关注"],["concern-item-btn-content1","已互粉"]];
                $(".my-fans-list").append(`<div class="my-fans-list-item">
                    <div class="my-fans-list-content">
                        <div class="fans-item-head-box">
                            <img src=
                    ${data['headpicture']}
                    class="fans-list-item-head">
                        </div>
                        <div class="fans-item-nickname-box">
                            <div class="fans-item-nickname" fansid=${data['fans_id']}>
                              <a style="text-decoration: none" href="#">${data['fans_nickname']}</a>
                             </div>
                        <div class="fans-item-intro">
                            ${data['intro']}
                        </div>
                        </div>
                        <div class="fans-item-btn-box">
                            <div class="fans-item-btn">
                                <button userid=
                                   ${data['fans_id']} class="fans-btn ${btn_class[data['is_friend']][0]}">
                                   ${btn_class[data['is_friend']][1]}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>`);
            }

             /*关注列表构造器*/
             function push_concern_list(data) {
                 $(".my-concern-list").append(`<div class="my-concern-list-item">
                     <div class="my-concern-list-content">
                         <div class="concern-item-head-box">
                             <img src=
                             ${data['headpicture']}
                               class="concern-list-item-head">
                         </div>
                         <div class="concern-item-nickname-box">
                             <div class="concern-item-nickname" followingid=${data['following_id']}>
                             <a href="#" style="text-decoration: none">${data['following_nickname']}</a>
                            </div>
                             <div class="concern-item-intro">
                             ${data['intro']}
                            </div>
                         </div>
                         <div class="concern-item-btn-box">
                             <div class="concern-item-btn">
                                 <button userid=
                                 ${data['following_id']}
                                   class="concern-btn concern-item-btn-content1">
                                   已关注
                                </button>
                             </div>
                         </div>
                     </div>
                 </div>`);
             }

             /*预览头像*/
            $(".choose-head").change(function () {
                let file = $(this)[0].files[0];
                let reader = new FileReader();
                reader.readAsDataURL(file);
                  reader.onload=function () {
                       $(".myhead").attr("src",this.result);
                       avatar=this.result;
                  }
            })

            /*导航条事件*/
            {
                /*用户退出*/
                $(".drop-exit-option").click(function () {
                    exit();
                })

                /*跳转到个人中心*/
                $(".personal-center-option").click(function () {
                    location.href = "PersonalCenter.html";
                })

                /*个人中心*/
                $(".user-personal-center").click(function () {
                    location.href = "PersonalCenter.html";
                })

                /*设置下拉界面的动画*/
                {
                    $(".user-head").mouseenter(function () {
                        $(".drop-box").fadeIn(250);
                        $(".drop-box").show();
                    })
                    $(".user-head").mouseout(function () {
                        $(".drop-box").hide();
                    })
                    $(".drop-box").mouseenter(function () {
                        $(".drop-box").show();
                        console.log("移入");
                    })
                    $(".drop-box").mouseout(function () {
                        $(".drop-box").hide();
                        console.log("移出");
                    })
                    $(".drop-box").mousemove(function () {
                        $(".drop-box").show();
                    })

                }

                /*退出函数*/
                function exit() {
                    let url = "http://localhost:8080/userServlet?action=user_exit";
                    axios({
                        method: "GET",
                        url: url,
                        params:{
                            userid:window.localStorage.getItem("email"),
                        }
                    }).then(function (res) {
                        console.log(res);
                        window.localStorage.removeItem("email");
                        window.localStorage.removeItem("avatar");
                        location.reload();
                    })
                }

                /*登录注册*/
                $(".user-login-register").click(function () {
                    location.href = "login.html";
                })
            }

            /*注销账号*/
            $(".logout-btn").click(function () {
                   modal("注销账号成功！！");
                let url='http://localhost:8080/userServlet?action=user_logout'
                axios({
                    method:"GET",
                    url:url,
                    params:{
                        email:window.localStorage.getItem("email")
                    }
                }).then(function (res) {
                      console.log(res);
                      window.localStorage.removeItem("email");
                      location.reload();
                })
            })

            /*修改密码按钮的点击事件*/
            $(".change-pwd-btn").click(function () {
                var patt=/^([a-zA-Z0-9]){5,12}$/;
                var pwdobj=$(".change-pwd-new-pwd");
                var againobj=$(".change-pwd-again-pwd");
                if(!patt.test(pwdobj.val())){
                    modal("密码必须由5-12位的字母或数字组成！");
                }
                else if(pwdobj.val()!==againobj.val()){
                    modal("两次密码输入不一致！！！");
                }else{
                    submit_change_pwd();
                }
            })

            /*发送修改密码的请求*/
            function submit_change_pwd() {
                let url='http://localhost:8080/userServlet?action=change_pwd'
                axios({
                     method:"GET",
                    url:url,
                    params:{
                         old_pwd:$(".change-pwd-old-pwd").val(),
                         new_pwd:$(".change-pwd-new-pwd").val(),
                         mailbox:$(".change-pwd-mail").val(),
                         verify_code:$(".verify-code").val(),
                        userid:window.localStorage.getItem("email")
                    },
                }).then(function (res) {
                    console.log(res);
                    modal(res.data.message);
                    if(res.data.code===200) {
                        /*清空输入框*/
                        clearInterval(interval);
                        var send_code_obj = document.getElementById("change-send-code");
                        send_code_obj.innerHTML = "点击发送验证码";
                        $(".send-code").attr("disabled", false).css("pointer-events", "auto");
                        $(".verify-code").val("");
                        $(".change-pwd-new-pwd").val("");
                        $(".change-pwd-old-pwd").val("");
                        $(".change-pwd-again-pwd").val("");
                    }
                })
            }

            /*发送邮箱验证码*/
            $(".send-code").click(function () {
                let url='http://localhost:8080/userServlet?action=send_code'
                axios({
                    method:"GET",
                    url:url,
                    params: {
                        mailbox:document.getElementById("mailbox").value
                    },
                }).then(function (res) {
                    console.log(res);
                })
                var send_code_obj=document.getElementById("change-send-code");
                var x=60;
                $(".send-code").attr("disabled",true).css("pointer-events","none");
                 interval=setInterval(function () {
                    send_code_obj.innerHTML=x+"s后重新发送";
                    x--;
                    if(x===-1){
                        send_code_obj.innerHTML="点击发送验证码";
                        clearInterval(interval);
                        $(".send-code").attr("disabled",false).css("pointer-events","auto");
                    }
                },1000);
            })

            /*上传头像的点击事件*/
            $(".choose-head-btn").click(function () {
                let formData = new FormData();//这里需要实例化一个FormData来进行文件上传
                if(document.getElementById('photofile').files[0]==null)
                {
                    modal("请选择一张图片之后再上传!!!");
                }else {
                    {
                        axios({
                            method: "GET",
                            url: "http://localhost:8080/uploadServlet?action=save_id",
                            params: {
                                userid: window.localStorage.getItem("userid")
                            },
                        }).then(function (res) {
                            console.log(res);
                        })
                    }
                    formData.append("file", document.getElementById('photofile').files[0]);
                    $.ajax({
                        url: "http://localhost:8080/uploadServlet?action=upload_head",
                        dataType: 'json',
                        type: 'POST',
                        async: false,//同步
                        data: formData,
                        cache: false,        // 不缓存
                        processData: false, // 使数据不做处理
                        contentType: false, // 不要设置Content-Type请求头
                        success: function (data) {
                            if (data.code === 110) {//成功
                                modal(data.message);
                                $(".myhead").attr("src",avatar);
                                $(".headpicture").attr("src",avatar);
                                $(".user-head").attr("src",avatar);
                                window.localStorage.setItem("avatar",data.data);
                            } else {
                                alert("上传头像失败");
                            }
                        }
                        , error: function (data) {
                            alert("上传头像失败");
                        }
                    })
                }
            })

            /*导航栏状态切换*/
            {
                /*给竖导航条中的我的头像添加点击事件*/
                $(".nav-head").click(function () {
                    $(".active").removeClass("active");
                    $(".nav-head").addClass("active");
                    $(".myhead").attr("src",window.localStorage.getItem("avatar"));
                    $(".choose-head").val("");
                    judeclass();
                })

                /*给竖导航条中的个人资料添加点击事件*/
                $(".nav-personal-info").click(function () {
                    $(".active").removeClass("active");
                    $(".nav-personal-info").addClass("active");
                    judeclass();
                })

                /*给竖导航条中的修改密码添加点击事件*/
                $(".nav-change-pwd").click(function () {
                    $(".active").removeClass("active");
                    $(".nav-change-pwd").addClass("active");
                    $(".change-pwd-mail").val(document.getElementById("msg-mailbox").innerText);
                    judeclass();
                })

                /*给竖导航条中的我的关注添加点击事件*/
                $(".nav-concern").click(function () {
                    get_concern_list();
                    $(".active").removeClass("active");
                    $(".nav-concern").addClass("active");
                    judeclass();
                })

                /*给竖导航条中的我的粉丝添加点击事件*/
                $(".nav-fans").click(function () {
                    get_fans_list();
                    $(".active").removeClass("active");
                    $(".nav-fans").addClass("active");
                    judeclass();
                })

                /*给竖导航条中的我的收藏添加点击事件*/
                $(".nav-collection").click(function () {
                    get_collection_list();
                    $(".active").removeClass("active");
                    $(".nav-collection").addClass("active");
                    judeclass();
                })

                /*给竖导航条中的账号注销添加点击事件*/
                $(".nav-logout").click(function () {
                    $(".active").removeClass("active");
                    $(".nav-logout").addClass("active");
                    judeclass();
                })
            }

             /*获取粉丝列表*/
            function get_fans_list() {
                let url='http://localhost:8080/userServlet?action=get_fans_list'
                axios({
                     method:"GET",
                     url:url,
                    params:{
                        email:window.localStorage.getItem("email")
                    }
                }).then(function (res) {
                     console.log(res);
                     let data1=res['data']['data'];
                     $(".my-fans-list").empty();
                     for(let i=0;i<data1.length;i++)
                     {
                        push_fans_list(data1[i]);
                     }
                     /*我的粉丝中的按钮*/
                    $(".fans-btn").click(function () {
                        if($(this).attr("class")==="fans-btn concern-item-btn-content1")
                        {
                            modal("已取消互粉");
                            $(this).attr("class","fans-btn concern-item-btn-content2");
                            $(this).text("关注");
                            $.post("http://localhost:8080/userServlet?action=cancel_concern",{following_id:$(this).attr("userid"),email:window.localStorage.getItem("email")});
                        }else{
                            modal("已互粉");
                            $(this).attr("class","fans-btn concern-item-btn-content1");
                            $(this).text("已互粉");
                            $.post("http://localhost:8080/userServlet?action=concern",{following_id:$(this).attr("userid"),email:window.localStorage.getItem("email")});
                        }
                    })
                    $(".fans-item-nickname").click(function () {
                        $.post("http://localhost:8080/userServlet?action=invite_others",{invite_id:$(this).attr("fansid")});
                        window.localStorage.setItem("invite_id",$(this).attr("fansid"));
                        window.open("OtherPersonalCenter.html");
                    })
                })
            }

            /*获取关注列表*/
            function get_concern_list() {
                let url='http://localhost:8080/userServlet?action=get_concern_list'
                axios({
                     method:"GET",
                     url:url,
                     params:{
                         email:window.localStorage.getItem("email")
                     }
                }).then(function (res) {
                      console.log(res);
                      let data1=res['data']['data'];
                      $(".my-concern-list").empty();
                      for(let i=0;i<data1.length;i++){
                          push_concern_list(data1[i]);
                      }
                    /*我的关注中的按钮*/
                    $(".concern-btn").click(function () {
                        if($(this).attr("class")==="concern-btn concern-item-btn-content1")
                        {      modal("已取消关注");
                               $(this).attr("class","concern-btn concern-item-btn-content2")
                               $(this).text("关注");
                               $.post("http://localhost:8080/userServlet?action=cancel_concern",{following_id:$(this).attr("userid"),email:window.localStorage.getItem("email")});
                        }else{
                            modal("关注成功");
                            $(this).attr("class","concern-btn concern-item-btn-content1")
                            $(this).text("已关注");
                            $.post("http://localhost:8080/userServlet?action=concern",{following_id:$(this).attr("userid"),email:window.localStorage.getItem("email")});
                        }

                    })
                    $(".concern-item-nickname").click(function () {
                          $.post("http://localhost:8080/userServlet?action=invite_others",{invite_id:$(this).attr("followingid")});
                          window.localStorage.setItem("invite_id",$(this).attr("followingid"));
                          window.open("OtherPersonalCenter.html");
                    })
                })
            }

            /*根据按钮的选中情况更新页面*/
            function judeclass() {
                if($(".nav-personal-info").hasClass("active"))
                {
                   $(".personal-info").show();
                }else{
                    $(".personal-info").hide();
                }
                if($(".nav-head").hasClass("active"))
                {
                    $(".change-head").show();
                }else{
                    $(".change-head").hide();
                }
                if($(".nav-change-pwd").hasClass("active"))
                {
                    $(".change-pwd").show();
                }else{
                    $(".change-pwd").hide();
                }
                if($(".nav-concern").hasClass("active"))
                {
                    $(".my-concern").show();
                }else{
                    $(".my-concern").hide();
                }
                if($(".nav-fans").hasClass("active"))
                {
                    $(".my-fans").show();
                }else{
                    $(".my-fans").hide();
                }
                if($(".nav-logout").hasClass("active"))
                {
                    $(".account-logout").show();
                }else{
                    $(".account-logout").hide();
                }
                if($(".nav-collection").hasClass("active"))
                {
                    $(".my-collection").show();
                }else{
                    $(".my-collection").hide();
                }
            }

            //设置编辑按钮的隐藏和出现
            {
            $(".base-msg").mouseenter(function () {
              $(".editor").css("display","");
           })
            $(".base-msg").mousemove(function () {
                $(".editor").css("display","");
            })
            $(".base-msg").mouseout(function () {
                $(".editor").css("display","none");
            })
            }

            /*模态框函数*/
            function modal(content) {
                $('.modal-body').html(content);
                $("#myModal").modal("show");
            }

            /*保存修改按钮的点击事件*/
            $(".change-info").click(function () {
                let nickname_val = $('#editor-info-nickname').val();
                let patt=/^.{5,12}$/;
                if(patt.test(nickname_val)) {
                    /*向后端发送修改个人信息的请求*/
                    send_change_info();
                    /*更新基本信息页面*/
                    $("#msg-nickname").html($('#editor-info-nickname').val());
                    var gender_editor_info = $('input:radio[name="editor-gender"]:checked').val();
                    if (gender_editor_info === "male") {
                        $('#msg-gender').html("男");
                    } else {
                        $('#msg-gender').html("女");
                    }
                    $('#msg-region').html($('#editor-info-region').val());
                    $('#msg-borndate').html($('#editor-info-birthday').val());
                    $('#msg-intro').html($('#editor-info-intro').val());
                    $('.editor-info').hide();
                    $('.base-msg-out').show()
                }else{
                    modal("昵称必须由5-12位的汉字、数字、字母或下划线组成！");
                }
            })

            /*向服务器发送修改个人信息的请求*/
            function send_change_info() {
                let url = 'http://localhost:8080/userServlet?action=change_user_info'
                axios({
                    method: 'GET',
                    url: url,
                    params:{
                       nickname:$('#editor-info-nickname').val(),
                        userid:$('#editor-info-id').val(),
                        gender:$('input:radio[name="editor-gender"]:checked').val(),
                        region:$('#editor-info-region').val(),
                        borndate: $('#editor-info-birthday').val(),
                        intro:$('#editor-info-intro').val()
                    },
                }).then(function (response) {
                      console.log(response);
                      modal(response.data.message);
                      /*更新本地的基本信息*/
                     window.localStorage.setItem("intro",$('#editor-info-intro').val());
                     window.localStorage.setItem("borndate",$('#editor-info-birthday').val());
                     window.localStorage.setItem("region",$('#editor-info-region').val());
                     window.localStorage.setItem("gender",$('input:radio[name="editor-gender"]:checked').val());
                     window.localStorage.setItem("nickname",$('#editor-info-nickname').val());
                })
            }

            /*当点击编辑按钮的时候，隐藏展示个人信息的页面，展示修改个人信息的页面*/
            $(".editor").click(function () {
                $(".base-msg-out").hide();
                $(".editor-info").show();
                /*初始化编辑信息界面*/
                {
                    $('#editor-info-nickname').val(document.getElementById("msg-nickname").innerText);
                    $('#editor-info-id').val(document.getElementById("msg-username").innerText);
                    $('#editor-info-mailbox').val(document.getElementById("msg-mailbox").innerText);
                    var gender_checked = document.getElementById("msg-gender").innerText;
                    if (gender_checked === "男") {
                        $('input:radio:first').prop('checked', true);
                    } else {
                        $('input:radio:last').prop('checked', true);
                    }
                    $('#editor-info-region').val(document.getElementById("msg-region").innerText);
                    $('#editor-info-birthday').attr('value', document.getElementById("msg-borndate").innerText);
                    $('#editor-info-intro').val(document.getElementById("msg-intro").innerText);
                }
            })

            /*内容管理*/
            $(".content-manage").click(function () {
                  if(is_login===0){
                      modal("登录之后再进行操作");
                  }else{
                      window.localStorage.setItem("CreatCenter",".nav-content-manage");
                      location.href="CreatCenter.html";
                  }
            })

            /*下拉菜单中的内容管理*/
            $(".content-manage-option").click(function () {
                 $(".content-manage").click();
            })

            /*专栏管理*/
            $(".column-manage-option").click(function () {
                 if(is_login===0){
                     modal("登录之后再进行操作");
                 }else{
                     window.localStorage.setItem("CreatCenter",".nav-column-manage");
                     location.href="CreatCenter.html";
                 }
            })

            /*创作中心*/
            $(".creat-center").click(function () {
                 if(is_login===0){
                     modal("登录之后再进行操作");
                 }else{
                     window.localStorage.setItem("CreatCenter",".nav-Home");
                     location.href="CreatCenter.html";
                 }
            })

            /*发布博客*/
            $(".btn-write-blog").click(function () {
                  if(is_login===0){
                      modal("登录之后再进行操作");
                  }else{
                      const avatar=$(".user-head").attr("src");
                      window.location.href=encodeURI("WriteBlogPage.html?avatar="+avatar);
                  }
            })

             /*logo*/
            $(".navbar-brand").click(function () {
                   location.href="Home.html";
            })
        </script>
</body>
</html>